import React, { Component } from 'react'
import ShowMovablePannel from './ShowMovablePannel'
import MovablePannel from './MovablePannelHoc'
import ShowMovablePannelHoc from './ShowMovablePannelHoc'
import WithMouseListener from './WithMouseListener'
const M1 = WithMouseListener(MovablePannel)
const M2 = WithMouseListener(ShowMovablePannelHoc)
export default class Test extends Component {
  handleMouse = value=>{
    return   ( <>
      x:{value.x},y:{value.y}
    </>)
  }
  handleMouse2 = value=>{
    return  (
           
      <div style={{
   width:100,
   height:100,
   background:'#008c8c',
   position:'absolute',
   left:value.x -50,
   top:value.y - 50
 }}>

 </div>
 
   )
  }
  render() {
    return (
      <>
      <M1 />
      <M2 />
      {/* <MovablePannel />
      <ShowMovablePannel></ShowMovablePannel> */}
      {/* <MouseListener>
        {this.handleMouse}
      </MouseListener>
      <MouseListener>
        {this.handleMouse2}
      </MouseListener> */}
      </>

    )
  }
}
